<template>
    <div class="m-5">
        <t-transfer
                :data="demoData"
                :target-keys="targetKeys"
                :operations="['关联','解散']"
                :render-content="renderContent"
                filterable
                show-footer
                style="height: 500px;"
                @on-change="$_onTransferChange">
            <div slot="left-footer" style="margin: -10px 0">
                <t-button slot="left-footer" size="sm" @click="$_onRefreshButtonClick">刷新</t-button>
            </div>
            <div slot="right-footer" style="margin: -10px 0">
                <t-button size="sm" @click="$_onRefreshButtonClick">刷新</t-button>
            </div>
        </t-transfer>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        demoData: [],
        targetKeys: []
      }
    },
    created() {
      this.getRelAuth()
      this.getNoRelAuth()
    },
    methods: {
      getMockData(data) {
        let mockData = []
        for (let i = 0; i < data.length; i++) {
          mockData.push({
            key:data[i].ID,
            label:data[i].NAME
          })
        }
        return mockData
      },
      getRelAuth(){
        this.http.$http.post(this.services.QUERY_ROLE_REL_AUTH_LIST, {
          bo: 'user',
          bc: 'USER_ROLE_PRIV_INFO',
          condition: JSON.stringify({
            FUNC_TYPE: 'H',
            ROLE_ID:'10009'
          })
        }).then(res => {
            this.demoData = this.getMockData(res.data.RESULT.DATALIST)
            console.log('getRelAuth---->'+this.demoData)
        })
      },
      getNoRelAuth(){
        this.http.$http.post(this.services.QUERY_ROLE_NO_REL_AUTH_LIST, {
          init_method: 'com.wframe.usermanager.services.impl.QueryAvailableRoleListImpl',
          condition: JSON.stringify({
            FUNC_TYPE: 'H',
            ROLE_ID:'10009'
          })
        }).then(res => {
          console.log(res)
          this.targetKeys = this.getMockData(res.data.RESULT.DATALIST)
          console.log('getNoRelAuth--->'+this.targetKeys)
        })
      },

      $_onTransferChange(newTargetKeys, direction, moveKeys) {
        console.log(newTargetKeys)
        console.log(direction)
        console.log(moveKeys)
        this.targetKeys = newTargetKeys
      },
      $_onRefreshButtonClick: function() {
        this.demoData = this.getMockData()
        this.targetKeys = this.getTargetKeys()
      },
      renderContent: function(h, item) {
        return h('span', [
          h('label', {}, [
            h('t-icon', {
              props: {
                type: 'access-point'
              }
            }),
            item.label
          ]),

        ])
      },
      show: function(item) {
        this.$Modal.info({
          title: `key: ${item.key}`,
          content: `content: ${item.label}<br>description: ${item.description}`
        })
      }
    }
}
</script>
